<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import "ol/ol.css"; // OpenLayers 样式
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";

const mapContainer = ref(null);

onMounted(() => {
  // 初始化地图
  const map = new Map({
    target: mapContainer.value,
    layers: [
      new TileLayer({
        source: new OSM(), // 使用 OpenStreetMap 作为底图
      }),
    ],
    view: new View({
      center: [0, 0], // 地图中心（EPSG:3857 投影）
      zoom: 2, // 缩放级别
    }),
  });
});
</script>

<style scoped>
.map-container {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
